<template>
	<view class="gy-date-frame">
		<view class="gy-date-frame-item" @click.stop="showPickerFn('start')">
			<view class="gy-date-frame-tag">始</view>
			<view class="gy-date-frame-value">{{ formatFn(props.value[0]) }}</view>
		</view>
		<view class="gy-date-frame-line">
			<text class="gy_icon_reduce"></text>
		</view>
		<view class="gy-date-frame-item" @click.stop="showPickerFn('end')">
			<view class="gy-date-frame-tag">终</view>
			<view class="gy-date-frame-value">{{ formatFn(props.value[1]) }}</view>
		</view>
	</view>

	<com-picker
		v-if="datePicker.show"
		mode="datetime"
		:title="datePicker.title"
		dateTimeFormat="yyyy-MM-dd"
		:startDateTime="datePicker.startDateTime"
		:endDateTime="datePicker.endDateTime"
		v-model="datePicker.modelValue"
		@close="datePicker.show = false"
		@submit="submitPickerFn" />

</template>

<script lang="ts" setup>

	import {
		ref,
		getCurrentInstance
	} from "vue";

	const { proxy } : any = getCurrentInstance();

	const emits = defineEmits(["click", "change"]);
	const props = defineProps({
		value: {
			type: Array,
			default: () => []
		}
	});

	const datePicker = ref({
		show: false,
		title: "",
		type: "",
		modelValue: "",
		startDateTime: "",
		endDateTime: ""
	});

	function showPickerFn(type: string){
		if("start" === type){
			let currentYear = new Date().getFullYear();
			datePicker.value = {
				show: true,
				title: "开始日期",
				type: type,
				modelValue: proxy.utils.date.format(props.value[0], 'yyyy-MM-dd'),
				startDateTime: (currentYear - 10) + "-01-01",
				endDateTime: proxy.utils.date.format(props.value[1], 'yyyy-MM-dd')
			}
		}
		if("end" === type){
			datePicker.value = {
				show: true,
				title: "结束日期",
				type: type,
				modelValue: proxy.utils.date.format(props.value[1], 'yyyy-MM-dd'),
				startDateTime: proxy.utils.date.format(props.value[0], 'yyyy-MM-dd'),
				endDateTime: proxy.utils.date.create('yyyy-MM-dd')
			}
		}
	}

	function submitPickerFn(val : any) {
		datePicker.value.modelValue = val;
		if("start" === datePicker.value.type){
			emits("change", [proxy.utils.date.formatTime(val + " 00:00:00"), props.value[1]]);
		}
		if("end" === datePicker.value.type){
			emits("change", [props.value[0], proxy.utils.date.formatTime(val + " 23:59:59")]);
		}
	}

	function formatFn(val: any){
		return proxy.utils.date.format(val, 'yyyy-MM-dd')
	}

</script>

<style lang="scss" scoped>
	.gy-date-frame{
		width: 100%;
		height: 120rpx;
		@include flex-between-center;
		padding: 0 var(--gy-gap);
		.gy-date-frame-line{
			width: 80rpx;
			@include flex-center-center;
			text{
				color: var(--gy-card-line-color);
			}
		}
		.gy-date-frame-item{
			flex: 1;
			height: 70rpx;
			@include flex-start-center;
			border: 1rpx solid var(--gy-card-line-color);
			padding: 0 20rpx;
			border-radius: var(--gy-border-radius-medium);
			.gy-date-frame-tag{
				width: 36rpx;
				height: 36rpx;
				@include flex-center-center;
				border-radius: 10rpx;
				font-size: 22rpx;
				color: #ffffff;
				background-color: var(--gy-color-primary);
			}
			.gy-date-frame-value{
				flex: 1;
				@include flex-center-center;
				font-size: 32rpx;
			}
		}
	}
</style>
